import React from 'react'
import './home.css'

import AppLayout from '../../layouts/AppLayout'
import Recommend from "./components/Recommend/Recommend"

import LocalStorageService from "../../utils/LocalStorageService";
import TabWithCustomUnderline from "../../layouts/TabWithCustomUnderline/TabWithCustomUnderline";
import NewSContainer from "../news/news";
import NewsListContainer from "../newslist/newslist";
import TopicContainer from "../topic/topic";
import {GlobalStore} from "../../context";
import DownloadHint from "../../shared-components/DownloadHint/DownloadHint";
import {behaviorReq} from "../../apis/goApis";


class HomeContainer extends React.Component {

    constructor(props) {
        super(props)
        this.storage = LocalStorageService
        this.state = {
            downloadShow: true,
            page: 0,
        }
    }

    componentDidMount() {
        this.setDownloadShow()
        this.setFromTopic()
        const isLogin = LocalStorageService.get('userid')
        if (isLogin) {
            behaviorReq({
                userid: LocalStorageService.get('userid'),
                handle: '资讯',
            })
        }
    }

    setFromTopic = () => {
        const fromTopic = this.context.topic.fromTopic
        this.setState({
            page: fromTopic ? 1 : 0,
        })
    }

    setDownloadShow = () => {
        const downloadShow = this.context.downloadApp.show
        this.setState({
            downloadShow,
        })
    }

    hidden = () => {
        this.context.downloadApp.hidden()
        this.setState({
            downloadShow: false,
        })
    }
    render() {

        // const tabs = [
        //     {title:'足球', active: true,},
            // {title:'篮球', active: false,},
        // ]

        // const SearchTemplate = (
        //     <div
        //         className='home-search-icon flex-center-align-center'
        //         onClick={() => this.props.history.push('search')}
        //     >
        //         <Icon type='search' color='#333333' size='xs'/>
        //     </div>
        // )

        const tabs = [
            {title: '资讯',},
            {title: '社区',},
        ]

        return (
            <AppLayout>
                {this.state.downloadShow ? <DownloadHint onHidden={this.hidden}/> : null}
                <TabWithCustomUnderline
                    page={this.state.page}
                    // page={1}
                    tabs={tabs}
                    prefixCls='home-tab'
                    tabBarBackgroundColor='#213A4B'
                    tabBarActiveTextColor='#fff'
                    tabBarInactiveTextColor='rgba(255,255,255,0.6)'
                    animated={false}
                    tabBarUnderlineStyle={{
                        width: '20%',
                        borderRadius: '0',
                        background: '#36C8B9',
                    }}
                    // tabBarUnderlineStyle={{
                    //     border: '2px solid #36C8B9',
                    // }}
                    onTabClick={(tab, index) => {
                        const isLogin = LocalStorageService.get('userid')
                        if (isLogin) {
                            behaviorReq({
                                userid: LocalStorageService.get('userid'),
                                handle: tab.title,
                            })
                        }
                        this.setState({
                            page: index,
                        })
                    }}
                >
                    <Recommend downloadShow={this.state.downloadShow}/>
                    <TopicContainer downloadShow={this.state.downloadShow}/>
                </TabWithCustomUnderline>
                {/*<ColorBgLayout>*/}
                {/*    <div style={{position: 'relative',}}>*/}
                {/*        {SearchTemplate}*/}
                {/*        <TabLayout*/}
                {/*            tabs={tabs}*/}
                {/*            prefixCls='home-tab'*/}
                {/*            prerenderingSiblingsNumber={0}*/}
                {/*        >*/}
                {/*            <Recommend/>*/}
                {/*            /!*<Basketball/>*!/*/}
                {/*        </TabLayout>*/}
                {/*    </div>*/}
                {/*</ColorBgLayout>*/}
            </AppLayout>
        )
    }
}

HomeContainer.contextType = GlobalStore

export default HomeContainer
